
<script type="text/javascript" src="js/audiojs/audio.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.22.custom/development-bundle/ui/jquery.ui.draggable.js" ></script>

<style>
	.video { width: 320px; height: 320px; padding: 0.5em; }
	.txt { width: 320px; height: 220px; padding: 0.5em; }
	.img { padding: 0.5em; } 
	.audio { width: 460px; height: 60px; padding: 0.5em; }
</style>


<script>

$(function() {
		   
	$( ".draggable" ).draggable({ containment: "#conteudo_infografico", scroll: true });
	
	$("#content").css("height","850px");
	
	//carrega o componente novo info
	$("#cfNovoInfo").load("componentes/novoInfo.php");
	
	//carrega o componente novo info
	$("#cfExibeInfo").load("componentes/exibeInfo.php");
});

function novoInfo(){
	
	if($("#infoId").val()!=""){
		$.jConfirm("Deseja sair do infografico anterior ?", '', function(result) {
			
			if(result==true){
				
				$("#conteudo_infografico").html('');
				
				$("#infoId").val('')
		
				$('#novo_info').dialog({show: "blind",
										hide: "explode",
										width:430,
										height:200,
									    resizable:false});
			
			}
		});
	}else{
		$('#novo_info').dialog({show: "blind",
								hide: "explode",
								width:430,
								height:200,
								resizable:false});
	}
	
	 
}

function mostraInfos(){	
	$('#exibe_info').dialog({show: "blind",
							hide: "explode",
							width:250,
							height:300,
							resizable:false}); 
}


function insereVideoInfo(){	

	if($("#infoId").val()==""){
		$.jAlert("Selecione um Infografico", '', function(result) {});
	}else{
		
		$('#info_video').dialog({show: "blind",
								hide: "explode",
								width:400,
								height:200,
								resizable:false}); 
	}
}

function insereAudioInfo(){	

	if($("#infoId").val()==""){
		$.jAlert("Selecione um Infografico", '', function(result) {});
	}else{
		
		$('#audio_info').dialog({show: "blind",
								 hide: "explode",
								 width:400,
								 height:200,
								 resizable:false}); 
	}
}


		

function insereTextoInfo(){	


	if($("#infoId").val()==""){
		$.jAlert("Selecione um Infografico", '', function(result) {});
	}else{
		$("#id").val( $("#infoId").val() );
		
		$("#content").css("height","1300px");
		
		$('html, body').animate({
			scrollTop: $("#menus").offset().top
		}, 500);
		
		$('#texto_info').show();		
	}
}



function insereImagemInfo(){	

	if($("#infoId").val()==""){
		$.jAlert("Selecione um Infografico", '', function(result) {});
	}else{
		
		$('#imagem_info').dialog({show: "blind",
								hide: "explode",
								width:400,
								height:200,
								resizable:false}); 
	}
}

function salvarInfo(){
	
	if($("#infoId").val()==""){
		$.jAlert("Selecione um Infografico", '', function(result) {});
	}else{
		
		//deixa em modo visual e salva
		$('#exibir_sair').hide()
			
		$.ajax({
			type:"POST",
			url:"actions/infograficoAction.php",
			data:{oper:'edit',
				  html_info:$("#conteudo_infografico").html(),
				  id:$("#infoId").val()},
			dataType:"json",
			success: function(data, textStatus, request){
				if(data['sucesso']==true){
					$.jAlert(data['mensagem'], '', function(result) {});
					exibeInfo( $("#infoId").val() );
					$( ".draggable" ).draggable({ containment: "#conteudo_infografico", scroll: true });
					$(".txt").resizable();
				}else{
					$.jAlert(data['mensagem'], '', function(result) {});				
				}
			}	
		});
		
	}
}


function excluirInfo(){
	
	if($("#infoId").val()==""){
		$.jAlert("Selecione um Infografico", '', function(result) {});
	}else{
		$.ajax({
			type:"POST",
			url:"actions/infograficoAction.php",
			data:{oper:'del',
				  id:$("#infoId").val()},
			dataType:"json",
			success: function(data, textStatus, request){
				if(data['sucesso']==true){
					$.jAlert(data['mensagem'], '', function(result) {});
					$("#infoId").val('');
					$("#conteudo_infografico").html('');
					//carrega o componente novo info
					$("#cfExibeInfo").load("componentes/exibeInfo.php");
					$( ".draggable" ).draggable({ containment: "#conteudo_infografico", scroll: true });
				}else{
					$.jAlert(data['mensagem'], '', function(result) {});				
				}
			}	
		});
	}
}


function exibeInfo(param){
	
	$("#infoId").val(param);
	
	$.ajax({
		type:"POST",
		url:"actions/infograficoAction.php",
		data:{oper:'list',
			  id:param},
		dataType:"json",
		success: function(data, textStatus, request){
			$("#conteudo_infografico").html(data['html']);
			
			$("#cfInseriVideo").load("componentes/insereVideoInfo.php?idinfo="+$('#infoId').val());
			$("#cfInsereTexto").load("componentes/insereTextoInfo.php?idinfo="+$('#infoId').val());
			$("#cfInsereImagem").load("componentes/insereImagemInfo.php?idinfo="+$('#infoId').val());
			$("#cpLerMensagens").load("componentes/lerMensagensInfo.php?id="+$("#txtIdPessoa").val()+"&idinfo="+$("#infoId").val());
			$(".txt").resizable();
			
			audiojs.createAll();
			
			$('#exibe_info').dialog('close');
			$( ".draggable" ).draggable({ containment: "#conteudo_infografico", scroll: true });
		}	
	});
}

function lerMensagens(){	
	if($("#infoId").val()==""){
		$.jAlert("Selecione um Infografico", '', function(result) {});
	}else{
		$('#abri_msg').dialog({show: "blind", hide: "explode", width:500, height:440, resizable:false}); 
	}
}

function remove(tagName){
	$( "#"+tagName+"" ).remove();
}

audiojs.events.ready(function() {
	audiojs.createAll();
});

</script>

<div style="position:absolute;top:70px;left:1150px;height:10px;width:10px;color:#000;font-weight:bold;text-align:right;">
    <a href="/?pg=home" title="Sair" style="border:0;">
        <img src="images/btnOutros/btnSairForms.png"/>
    </a>
</div>

<input type="hidden" id="infoId" name="infoId"/>
<input type="hidden" id="txtIdPessoa" name="txtIdPessoa" value="<?php echo $idPessoa; ?>"/>

<div id="conteudo_infografico" style="position:relative;width:1000px;margin-left:auto;margin-right:auto;top:100px;height:620px;overflow:auto;border:#333;border-bottom-width:thin;border-style:dashed;border-spacing:inherit;">
</div>


<br /><br /><br /><br /><br /><br /><br />

<?php include("componentes/insereTextoInfo.php"); ?>

<div id="menus" style="background:#CCC;position:relative;width:100%;height:30px;text-align:center;margin-top:5px;">
	
    <div style="position:relative;width:1000px;margin-left:auto;margin-right:auto;">
    
        <div style="width:200px;float:left;margin-left:50px;text-align:center;">
            <a href="javascript:void(0);" title="Novo" onclick="novoInfo();">
                <img src="images/IconsInfoGrafico/Img11.png" />
            </a>
            &nbsp;&nbsp;&nbsp;
            <a href="javascript:void(0);" title="Procurar" onclick="mostraInfos();">
                <img src="images/IconsInfoGrafico/Img12.png" />
            </a>
            &nbsp;&nbsp;&nbsp;
            <a href="javascript:void(0);" title="Testar">
                <img src="images/IconsInfoGrafico/Img10.png" onclick="$('#exibir_sair').hide()" />
            </a>
        </div>
        <div style="width:500px;float:left;text-align:center;">
            <a href="javascript:void(0);" title="Texto" onclick="insereTextoInfo();">
                <img src="images/IconsInfoGrafico/Img1.png" />
            </a>
            &nbsp;&nbsp;&nbsp;
            <a href="javascript:void(0);" title="Imagem" onclick="insereImagemInfo();">
                <img src="images/IconsInfoGrafico/Img2.png" />
            </a>
            &nbsp;&nbsp;&nbsp;
            <a href="javascript:void(0);" title="Video" onclick="insereVideoInfo();">
                <img src="images/IconsInfoGrafico/Img3.png" />
            </a>
            &nbsp;&nbsp;&nbsp;
            <a href="javascript:void(0);" title="Audio" onclick="insereAudioInfo();">
                <img src="images/IconsInfoGrafico/Img4.png" />
            </a>
            &nbsp;&nbsp;&nbsp;
            <a href="javascript:void(0);" title="Mensagem" onclick="lerMensagens();">
                <img src="images/IconsInfoGrafico/Img6.png" />
            </a>
        </div>
        <div style="width:200px;float:left;margin-right:50px;text-align:center;">
            <a href="javascript:void(0);" title="Salvar" onclick="salvarInfo();">
                <img src="images/IconsInfoGrafico/Img8.png" />
            </a>
            &nbsp;&nbsp;&nbsp;
            <a href="javascript:void(0);" title="Excluir" onclick="excluirInfo();">
                <img src="images/IconsInfoGrafico/Img9.png" />
            </a>
        </div>
    
    </div>
    
</div>  

<!-- -----------Novo Info Componente------------- -->
<div id="cfNovoInfo" style="display:none;"></div>
<!-- -----------Novo Info Componente------------- -->

<!-- -----------Exibe Info Componente------------- -->
<div id="cfExibeInfo" style="display:none;"></div>
<!-- -----------Exibe Info Componente------------- -->

<!-- -----------insere video Info Componente------------- -->
<div id="cfInseriVideo" style="display:none;"></div>
<!-- -----------insere video Info Componente------------- -->

<!-- -----------insere video Info Componente------------- 
<div id="cfInsereTexto" style="display:none;"></div>
 -----------insere video Info Componente------------- -->

<!-- -----------insere imagem Info Componente------------- -->
<div id="cfInsereImagem" style="display:none;"></div>
<!-- -----------insere imagem Info Componente------------- -->

<!-- -----------insere Audio Info Componente------------- -->
<div id="cfInsereAudio" style="display:none;"></div>
<!-- -----------insere Audio Info Componente------------- -->

<!-- -----------Fala Professor Componente------------- -->
<div id="cpLerMensagens" style="display:none;"></div>
<!-- -----------Fala Professor Componente------------- -->